<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/default/easyui.css"> -->
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/material/easyui.css">
    <script type="text/javascript" src="../public/jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../public/jeasyui/jquery.easyui.min.js"></script>
    <script src="../public/js/jquery.serializejson.min.js"></script>
    <title>Document</title>
    <style>
        .tree-file,
        .tree-folder-open,
        .tree-folder {
            background-image: none;
        }
    </style>
</head>

<body>
    <div id="dlgsearch" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
    </div>
    <div id="dlgreply" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
        <span style="font-size:18px;color:#c00;line-height: 150px"></span>
        <ul id="tt"></ul>
    </div>
    <div id="dlgupdata" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:650px;padding:10px;top:0">
        <form id="ff" method="post">
            <div style="margin-bottom:20px;width:0;height:0;overflow:hidden">
                <input name="_id" style="width:0;height:0;overflow:hidden" data-options="required:false">
            </div>
            <div id="newsid" style="margin-bottom:20px">
                <input class="easyui-textbox"  name="newsid" style="width:100%" data-options="label:'id:',required:false">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="user" style="width:100%" data-options="label:'评论者:',required:false">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="like" style="width:100%" data-options="label:'赞:',required:false">
            </div>
            <div style="margin-bottom:20px">
                
                内容 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea name="content" id="" cols="30" rows="10" style="vertical-align: top;border-radius: 4px 4px 4px 4px;border-color: #ccc"></textarea>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="unlike" style="width:100%" data-options="label:'踩:',required:false">
            </div>
            <div style="margin-bottom:20px">
                评论时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="dt" type="text" name="time">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-radiobutton" name="isauthor" value="true" label="是作者评论">
                <br>
                <br>
                <input class="easyui-radiobutton" name="isauthor" value="false" label="不是作者评论">

            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <table id="dg" title="DataGrid" style="width:700px;height:250px" data-options="fit:true,toolbar:'#tb'">
    </table>
    <div id="tb" style="padding:2px 5px;">
        <input class="easyui-searchbox" data-options="prompt:'请输入评论者',searcher:doSearch" style="width:200px">
        <a href="#" id="add" class="easyui-linkbutton" data-options="plain:true">增加</a>
        <a href="#" id="deletes" class="easyui-linkbutton" data-options="plain:true">批量删除</a>
    </div>
    <script type="text/javascript">
      

        dginit('http://localhost:3000/comment/list');
        function dginit(url) {
            $('#dg').datagrid({
                url: url,
                pagination: true,
                columns: [[
                    { field: 'checkbox', checkbox: true },
                    { field: 'newsid', title: 'id', width:200,  align: 'center',validType: 'length[1,10]' },
                    { field: 'user', title: '评论者', width: 100 },
                    { field: 'like', title: '赞', align: 'right', width: 80 },
                    { field: 'unlike', title: '踩', align: 'right', width: 80 },
                    {
                        field: 'time', title: '评论时间', align: 'center', width: 120, formatter(value) {
                            console.log(value)
                            if (value) {
                                return value.split("T")[0];
                            }

                        }

                    },
                    { field: 'isauthor', title: '是否作者评论', align: 'center', width: 120 },
                    {
                        field: '_id', align: "center", title: '操作', formatter: (value, row, index) => {
                            return `<a href="javascript:void(0);" onclick=seachcontent('${value}')>查看评论</a> <a href="javascript:void(0);" onclick=seachreply('${value}')>查看回复</a> <a href="javascript:void(0);" onclick=updatedata('${value}')>修改</a> <a href="javascript:;" onclick=deleteData('${value}')>删除</a>`
                        }
                    }
                ]],
                toolbar: "#tb"
            });
        }

        $('#dt').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
        function deleteData(id) {
            $.messager.confirm('Confirm', 'Are you sure you want to delete record?', function (r) {
                if (r) {
                    $.ajax({
                        url: "http://localhost:3000/comment/" + id,
                        type: 'delete'
                    }).done(data => {
                        console.log(data);
                        $('#dg').datagrid('reload');
                    })
                }
            })

        }
        function updatedata(id) {
            $.ajax({
                url: 'http://localhost:3000/comment/' + id,
                type: 'get',
            }).done(data => {
                var obj = data;
                $('#dlgupdata').dialog('open')
                $('#dlgupdata').form('load', obj);
            });
            return false;
        }
        function seachreply(id) {
            $("#dlgreply span").text("没有一个人回复他的评论")
            $('#tt').tree({
                type: "post",
                url: 'http://localhost:3000/comment/list/' + id,
                loadFilter: function (data) {

                    console.log(data)
                    if (data.d) {
                        return data.d;
                    } else {
                        return data;
                    }
                },
                formatter: function (node) {
                    $("#dlgreply span").text("")
                    return node.text;
                }
            });

            $("#dlgreply").dialog("open");
            return false;
        }
        function seachcontent(id) {

            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/comment/' + id
            }).done(data => {
                console.log(data);
                $("#dlgsearch").html(data.content).dialog("open");
            });
            return false;

        }
        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    if ($(this).form('enableValidation').form('validate')) {
                        var type = "post";
                        var url = "http://localhost:3000/comment";
                        var data = $("#ff").serializeJSON();
                        if (data._id.length > 0) {
                            type = "put"
                            url += "/" + data._id;
                        } else {
                            delete data._id;
                        }
                        if(idd){
                            data.newsid=idd;
                        }
                        $.ajax({
                            type: type,
                            url: url,
                            data: data
                        }).done(data => {
                            $('#dlgupdata').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm();
                        });
                    }
                }
            });
        }
        function clearForm() {
            $('#ff').form('clear');
        }
        function removes() {
            var selectedrows = $('#dg').datagrid('getSelections');
            if (selectedrows.length > 0) {
                $.messager.confirm('确认对话框', '你确认删除数据?', function (r) {//r:true/false
                    if (r) {
                        var ids = [];
                        for (var i = 0; i < selectedrows.length; i++) {
                            ids.push(selectedrows[i]._id);
                        }
                        //console.log(ids.toString());
                        //console.log(ids);
                        $.ajax({
                            url: 'http://localhost:3000/comment/removes',
                            type: 'post',
                            data: {
                                ids: ids
                            }
                        }).then(res => {
                            $('#dg').datagrid('reload');
                        });
                    }
                })

            } else {
                alert("请选择您要删除的内容");
            }

        }
        $("#add").click(() => $('#dlgupdata').dialog('open'));
        $("#deletes").click(removes);
        function doSearch(value) {
            if (value == "") {
                value = {};
            }
            dginit('http://localhost:3000/comment/lists/' + value)
        }
        var ldata = location.search;
        var idd=null;
        if (ldata) {
            if (/^news/.test(ldata.substr(1))) {
               idd=ldata.substr(8);
                // alert(newsid)
                dginit('http://localhost:3000/comment/news/' + idd);
                $("#newsid").css({width:0,height:0,overflow:'hidden',display:'none'})
            }
        }
    </script>
</body>

</html>